<template>
    <UxDialog :visible="!!value" @close="close()" v-loading="loading">
        <el-form class="account-form" :model="pswForm" :rules="rules" ref="pswForm" @submit.native.prevent @keydown.enter.native.prevent="confirm">

            <h2>Change password</h2>

            <el-form-item prop="password" :error="errorMsg">
                <el-input v-model="pswForm.password" placeholder="Current password" :type="suffixShow.oldPsw ? 'text' : 'password'" :maxlength="64">
                    <template slot="suffix">
                        <img v-if="suffixShow.oldPsw" @click="suffixShow.oldPsw = false" src="@/assets/images/setting/dialog-password-open.png" />
                        <img v-if="!suffixShow.oldPsw" @click="suffixShow.oldPsw = true" src="@/assets/images/setting/dialog-password-close.png" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="new_password">
                <el-input v-model="pswForm.new_password" placeholder="New password" :type="suffixShow.newPsw ? 'text' : 'password'" :maxlength="64">
                    <template slot="suffix">
                        <img v-if="suffixShow.newPsw" @click="suffixShow.newPsw = false" src="@/assets/images/setting/dialog-password-open.png" />
                        <img v-if="!suffixShow.newPsw" @click="suffixShow.newPsw = true" src="@/assets/images/setting/dialog-password-close.png" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password_verify">
                <el-input v-model="pswForm.password_verify" placeholder="Confirm password" :type="suffixShow.checkPsw ? 'text' : 'password'" :maxlength="64">
                    <template slot="suffix">
                        <img v-if="suffixShow.checkPsw" @click="suffixShow.checkPsw = false" src="@/assets/images/setting/dialog-password-open.png" />
                        <img v-if="!suffixShow.checkPsw" @click="suffixShow.checkPsw = true" src="@/assets/images/setting/dialog-password-close.png" />
                    </template>
                </el-input>
            </el-form-item>

            <div class="recharge-submit">
                <button @click="close">Cancel</button>
                <button @click="confirm()" type="primary">Confirm</button>
            </div>

        </el-form>

    </UxDialog>
</template>
<script>
import RE from "@/utils/RE.js";
import { mapGetters } from "vuex";
import Md5 from "js-md5";
export default {

    name: "UserBillingWalletRecharge",
    props: ["value"],
    data () {
        var Rule = {
            validateOldPass: (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("Please input a password"));
                } else {
                    if (RE.psw.test(value)) {
                        callback();
                    } else {
                        callback(
                            new Error(
                                "The password must be at least 6 characters"
                            )
                        );
                    }
                }
            },
            validatePass: (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("Please input a password"));
                } else {
                    if (RE.psw.test(value)) {
                        if (this.pswForm.password_verify !== "") {
                            this.$refs.pswForm.validateField("password_verify");
                        }
                        callback();
                    } else {
                        callback(
                            new Error(
                                "The password must be at least 6 characters"
                            )
                        );
                    }
                }
            },
            validatePass2: (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("Please enter the password again"));
                } else if (value !== this.pswForm.new_password) {
                    callback(new Error("The two passwords are inconsistent!"));
                } else {
                    callback();
                }
            },
        };
        return {
            pswForm: {
                password: "",
                new_password: "",
                password_verify: ""
            },
            rules: {
                password: [
                    { validator: Rule.validateOldPass, trigger: "blur" },
                ],
                new_password: [
                    { validator: Rule.validatePass, trigger: "blur" },
                ],
                password_verify: [
                    { validator: Rule.validatePass2, trigger: "blur" },
                ],
            },
            suffixShow: {
                oldPsw: false,
                newPsw: false,
                checkPsw: false,
            },
            errorMsg: "",
            loading: false,
        };
    },
    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
    },
    methods: {
        close () {
            this.pswForm = {
                password: "",
                new_password: "",
                password_verify: ""
            };
            this.$emit("input", null);
        },
        confirm () {
            this.$refs['pswForm'].validate((valid) => {
                if (valid) {
                    this.doPut()
                } else {
                    return false;
                }
            });
        },
        async doPut () {
            this.loading = true;
            this.errorMsg = "";
            let resData = {};
            Object.keys(this.pswForm).map((key) => resData[key] = Md5((this.pswForm[key] || "").replace(/(^\s*)|(\s*$)/g, "")));
            let res = await this.$http("User.putPsw", resData);
            if (res.code == 0) {
                this.$router.push("/");
                this.$uxMessage.success("Password changed successfully");
                this.$store.dispatch('doLogout')
            } else {
                this.$uxMessage.error("Failed to change password");
            }
            if (res.code == 6006) {
                this.errorMsg = res.msg;
            }
            this.loading = false;
        },
    },
};
</script>
<style lang="scss" scoped>
.account-form {
    width: 440px;
    height: 350px;
    box-sizing: border-box;
    padding: 40px 60px;

    & > h2 {
        height: 20px;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        margin-bottom: 18px;
    }

    .el-form-item {
        margin-bottom: 24px;

        &::v-deep .el-form-item__content input {
            border-radius: 8px;
            // line-height: 32px;
        }

        &::v-deep .el-input__suffix {
            width: 30px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            span {
                display: inline-block;
                width: 16px;
                height: 16px;
            }
            img {
                width: 16px;
                height: 16px;
            }
        }
    }
}

.recharge-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    button {
        width: 154px;
        height: 40px;
    }
}
</style>
